<template>
  <div>
    <CategorySelector :disabled="isShow !== 1" />
    <!-- <SpuList v-if="isShow === 1" @setIsShow="setIsShow" />
    <AddOrUpdateSpu v-else-if="isShow === 2" @setIsShow="setIsShow" />
    <AddSku v-else @setIsShow="setIsShow" /> -->
    <!--
      isShow = $event
      事件回调函数只有一条语句可以直接写
      可以省略this（isShow -- this.isShow）
      $event
        给组件绑定的事件，默认都是自定义事件
        自定义事件的$event，代表事件回调函数的第一个参数

        简单理解：$event是event对象
          因为在原生DOM事件中，事件回调函数第一个参数就是event对象，所以$event是event对象
          但是，在自定义事件中，没有event对象，$event代表的是事件回调函数第一个参数
        真正理解：$event是事件回调函数的第一个参数
     -->
    <SpuList
      v-if="isShow === 1"
      @setIsShow="isShow = $event"
      @setSpuId="spuId = $event"
    />
    <AddOrUpdateSpu v-else-if="isShow === 2" @setIsShow="isShow = $event" />
    <AddSku v-else :spu-id="spuId" @setIsShow="isShow = $event" />
  </div>
</template>

<script>
import CategorySelector from '../categorySelector'
import SpuList from './components/SpuList.vue'
import AddOrUpdateSpu from './components/AddOrUpdateSpu.vue'
import AddSku from './components/AddSku.vue'

export default {
  name: 'Spu',
  components: {
    CategorySelector,
    SpuList,
    AddOrUpdateSpu,
    AddSku
  },
  data() {
    return {
      /*
        布尔值只能决定两个组件
        使用数值可以任意多个组件
          1 SpuList
          2 AddOrUpdateSpu
          3 AddSku
      */
      // isShowSpuList: true
      isShow: 1,
      spuId: undefined
    }
  },
  methods: {
    setIsShow(isShow) {
      this.isShow = isShow
    }
  }
}
</script>

<style>
</style>
